<template>
  <div>
    <el-tiptap
      v-model="content"
      placeholder="请输入内容"
      height="400"
      :extensions="extensions"
      :editable="editable"
    />
  </div>
</template>

<script>
import {
  Doc,
  Text,
  TextColor,
  FontSize,
  Paragraph,
  Bold,
  Underline,
  Italic,
  Strike,
  ListItem,
  BulletList,
  OrderedList
} from "element-tiptap";

export default {
  props: {
    value: {
      type: String,
      default: ""
    },
    editable: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    value() {
      if (this.value !== this.content) {
        this.content = this.value;
      }
    },
    content() {
      this.$emit("input", this.content);
    }
  },
  data() {
    return {
      content: this.value,
      extensions: [
        new Doc(),
        new Text(),
        new Paragraph(),
        new FontSize(),
        new Bold(), 
        new Underline(), 
        new Italic(),
        new Strike(),
        new ListItem(),
        new BulletList(),
        new OrderedList(),
        new TextColor()
      ]
    };
  },
  methods: {}
};
</script>
